<template>
  <div>
    <div style="display: flex; justify-content: flex-end; margin: 10px">
      <a-button type="primary" @click="back(null)">返回上一级</a-button>
    </div>
    <a-form :form="formData">
      <a-form-item
        label="广告名称"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-input
          placeholder="请输入广告名称"
          v-decorator="['posterName', { initialValue: posterName }]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="广告备注"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-input
          placeholder="请输入广告备注"
          v-decorator="['remark', { initialValue: remark }]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="所属页面"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <div v-if="posterType != 2">
          <a-select
            placeholder="请选择所属页面"
            v-decorator="['posterType', { initialValue: posterType }]"
          >
            <a-select-option key="1">首页轮播图</a-select-option>
            <a-select-option key="4">文章列表页</a-select-option>
          </a-select>
        </div>
        <div v-else>
          <a-select
            placeholder="请选择所属页面"
            v-decorator="['posterType', { initialValue: posterType }]"
          >
            <a-select-option key="2">首页轮播</a-select-option>
          </a-select>
        </div>
      </a-form-item>
      <a-form-item
        label="展示形式"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-select
          placeholder="请选择展示形式"
          v-decorator="['showType', { initialValue: showType }]"
          @change="changType"
        >
          <a-select-option key="1">图片</a-select-option>
          <a-select-option key="2">视频</a-select-option>
        </a-select>
      </a-form-item>
      <div v-if="this.key == 1">
        <a-form-item
          label="广告图片"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-upload
            v-decorator="['file', { initialValue: file }]"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :before-upload="beforeUpload"
            :customRequest="selfUpload"
            @change="handleChange"
          >
            <img style="width: 180px" v-if="imageUrl" :src="imageUrl" />
            <div v-else>
              <a-icon type="plus" />
              <div class="ant-upload-text">上传图片</div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item
          label="广告链接"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-input
            placeholder="请输入广告链接"
            v-decorator="['link', { initialValue: link }]"
          />
        </a-form-item>
      </div>
      <div v-else>
        <a-form-item
          label="视频封面"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-upload
            v-decorator="['file', { initialValue: file }]"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :before-upload="beforeUpload"
            :customRequest="selfUpload"
            @change="handleChange"
          >
            <img style="width: 180px" v-if="imageUrl" :src="imageUrl" />
            <div v-else>
              <a-icon type="plus" />
              <div class="ant-upload-text">上传视频封面</div>
            </div>
          </a-upload>
        </a-form-item>

        <a-form-item
          label="上传视频"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <!--                         
                        <a-upload
                            accpet="video/*"
                            :multiple="false"
                            :beforeUpload="beforeUploadVideo"
                            :customRequest="selfUpload"
                        >
                            <a-button> <a-icon type="upload" />选择视频</a-button>
                            （注：视频格式为.mp4，视频大小小于500M）
                        </a-upload> -->
          <a-input
            placeholder="请输入视频链接"
            v-decorator="['url', { initialValue: url }]"
          />
        </a-form-item>
      </div>
      <a-form-item :wrapper-col="{ span: 5, offset: 18 }">
        <a-button style="margin-right: 20px" @click="showChange = false">
          取消</a-button
        >
        <a-button type="primary" @click="save()"> 提交上传</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import api from "@/api/api.js";
import { quillEditor } from "vue-quill-editor";
import { quillRedefine } from "vue-quill-editor-upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  components: {},
  data() {
    return {
      posterName: "",
      remark: "",
      link: "",
      posterType: "",
      showType: "",
      url: "",
      file: "",
      visibleDetails: false,
      dataTable: [],
      rowSelection: {
        hideDefaultSelections: true,
      },
      form: {
        size: 10, //每页条数
        page: 1, // 起始页
      },
      totalPage: 0,
      showHOST: api.showHOST,
      radioType: 2,
      formData: this.$form.createForm(this),
      key: "",
      imageUrl: "",
      prarm: this.$route.query.params,
      showPhoto: false,
    };
  },
  methods: {
    back() {
      this.$router.push("posterPage");
    },
    cancel(e) {
      this.$message.error("取消!");
    },
    changType(val) {
      this.key = val;
    },

    save(e) {
      let that = this;
      this.formData.validateFields((err, values) => {
        //   debugger
        console.info(values);
        const f = new FormData();
        // debugger;
        if (values.file != undefined) {
          f.append("file", values.file.file.originFileObj);
        }
        delete values.file;
        for (var key in values) {
          f.append(key, values[key]);
        }
        console.log(that.param);
        if (that.param != undefined) {
          f.append("posterId", that.param.posterId);
        }

        if (!err) {
          //  api.savePoster(f).then(res =>{
          //       if(res.code==200){
          //           this.formData.resetFields();
          //      this.$router.push("posterPage");
          //      }
          //  })
        }
      });
    },
    beforeUploadVideo(file) {
      console.info(file);
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("请上传jpeg或png格式的图片!");
      }
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error("图片大小不能小于5兆!");
      }
      return isJpgOrPng && isLt2M;
    },
    selfUpload({ action, file, onSuccess, onError, onProgress }) {},
    handleChange(info) {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, (imageUrl) => {
        this.imageUrl = imageUrl;
        this.loading = false;
      });
    },
  },

  created() {
    this.key = 1;
    if (this.prarm !== null) {
      let obj = this.prarm;
      this.posterName = obj.posterName;
      this.remark = obj.remark;
      this.posterType = obj.posterType + "";
      this.showType = obj.showType + "";
      this.file = obj.file;
      this.url = obj.url;
      this.link = obj.link;
      this.imageUrl = this.showHOST + obj.pic;
      this.showPhoto = true;
      if (this.url != null) {
        this.key = 2;
      }
    }
  },
  mounted() {},
};
</script>

<style lang="scss" scoped="" type="text/css">
.editable-row-operations a {
  margin-right: 8px;
}
.top-btn {
  padding: 10px;
}
.code-img {
  display: block;
  width: 150px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>